<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>原生</title>
		<style>
			#box_ {
				position:relative;
				width:200px;
				height:50px;
				border:1px solid transparent;
				float:left;
			}
			#bg_ {
				height:10px;
				margin-top:11px;
				border:1px solid #ddd;
				border-radius:5px;
				overflow:hidden;
			}
			#bgcolor_ {
				background:#f3f3f3;
				width:100px;
				height:10px;
				border-radius:5px;
			}
			#bt_ {
				width:35px;
				height:35px;
				background-color:rgb(243,243,243);
				border-radius:17px;
				overflow:hidden;
				position:absolute;
				left:80px;
				margin-left:-12px;
				border:1px solid #d0cbcb;
				top:-2px;
				cursor:pointer;
			}
			#text_xa_ {
				width:100px;
				margin:0 auto;
				font-size:14px;
				padding-left:10px;
				padding-top:2px;
				line-height:2em;
				float:left;
			}
			#text_xa {
				width:100px;
				margin:0 auto;
				font-size:14px;
				padding-left:10px;
				padding-top:2px;
				line-height:2em;
				float:left;
			}
		</style>
	</head>
	<body oncontextmenu="return false" onselectstart="return false">
	
	    <div style="width:100%;" class="abgs_a">
	        <form class="form-horizontal col-sm-12" role="form">
	            <div class="form-group label_a div_left">
	                <div class="col-sm-4 col-xs-9">
	                    <div id="text_xa_">安卓:50%</div>
	                    <div id="box_">
	                        <div id="bg_">
	                            <div id="bgcolor_"></div>
	                        </div>
	                        <div id="bt_"></div>
	                    </div>
	                    <div id="text_xa">苹果:50%</div>
	                </div>
	            </div>
	        </form>
	    </div>
		<script type="text/javascript">
			// 进度条2
		window.onload = function(){
			    var hasTouch=function(){
			        var touchObj={};
			        touchObj.isSupportTouch = "ontouchend" in document ? true : false;
			        return touchObj.isSupportTouch ;
			   }
			    var oBox = document.getElementById('box_');
			
			    var oBg = document.getElementById('bg_');
	
			    var oBgcolor = document.getElementById("bgcolor_");
		
			    var oBtn = document.getElementById('bt_');
	
			    var oText = document.getElementById('text_xa_');
	
			    var oText_xa = document.getElementById('text_xa');
			    var statu = false;
			    var ox = 0;
			    var lx = 0;
			    var left = 100;
			    var bgleft = 0;
			   if(hasTouch()==true){
				   	oBtn.addEventListener("touchstart",function(e){
				    	var touch = e.touches["0"] || e.originalEvent.changedTouches[0];
				        lx = oBtn.offsetLeft;
				        ox = touch.pageX - left;
				        statu = true;
				    });
				    document.addEventListener("touchend",function(){
				        statu = false;
				    });
				  	oBox.addEventListener("touchmove",function(e){
				    	var touch = e.touches["0"] || e.originalEvent.changedTouches[0];
				        if (statu) {
				            left = touch.pageX - ox;
				            if (left < 0) {
				                left = 0;
				            }
				            if (left > 200) {
				                left = 200;
				            }
				            oBtn.style.left = left + 'px';
				            oBgcolor.style.width = left +'px';
				            oText.innerHTML=('安卓:' + parseFloat(left / 2).toFixed(2) + '%');
				            oText_xa.innerHTML=('苹果:' + parseFloat(100 - (left / 2)).toFixed(2) + '%');
				        }
				   });
			   }else{
				   	oBtn.onmousedown = function(e){
				        lx = oBtn.offsetLeft;
				        ox = e.pageX - left;
				        statu = true;
				    };
				    document.onmouseup = function(){
				        statu = false;
				    }
				    oBox.onmousemove = function(e){
				        if (statu) {
				            left = e.pageX - ox;
				            if (left < 0) {
				                left = 0;
				            }
				            if (left > 200) {
				                left = 200;
				            }
				            oBtn.style.left = left + 'px';
				            oBgcolor.style.width = left +'px';
				            oText.innerHTML=('安卓:' + parseFloat(left / 2).toFixed(2) + '%');
				            oText_xa.innerHTML=('苹果:' + parseFloat(100 - (left / 2)).toFixed(2) + '%');
				        }
				    }
			   }
			}	
		</script>
	</body>
</html>